<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>复制元素</title>
		<style>
			#d1{
				border: 10px solid red;
			}
		</style>
		<script>
			function chP(){
				document.getElementById("p1").innerHTML+="<img src='../images/kongzi.jpg'/>";
			}
			function addPic(){
				var im=document.createElement("img");
				im.setAttribute("src","../images/jixue.jpg");
				im.setAttribute("height","150px");
				im.setAttribute("width","150px");
				im.setAttribute("id","pic");
				//document.getElementById("d1").appendChild(im);
				let d=document.getElementById("d1");
				d.insertBefore(im,d.firstElementChild);
			}
			function cloneDiv(){
				let d=document.getElementById("d1");
				let d2=d.cloneNode(true);
				document.body.appendChild(d2);
			}
			function delDiv(){
				let im=document.getElementById("pic");
				document.getElementById("d1").removeChild(im);
				//document.body.removeChild(im);
			}
			window.onload=function(){
				let b=document.getElementById("gai");
				b.onclick=function(){
					alert("改背景色");
					document.body.bgColor="red";
				}
			}
		</script>
	</head>
	<body>
		<p id="p1" style="border: 2px solid red;">
			<button type="button" onclick="chP()">改p</button>
		</p>
		<div id="d1">
			<button type="button" onclick="addPic()">加图片</button>
			<button type="button" onclick="cloneDiv()">克隆div</button>
			<button type="button" onclick="delDiv()">删除div中的元素</button>
			
			<button type="button"  id="gai">改变body的颜色</button>
		</div>
		
	</body>
</html>